<template>
  <div class="employee-container">
    <div style="margin-top: 45px;margin-bottom: 0px">
      <div style="float: left">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/layout/employee' }">系统主页</el-breadcrumb-item>
            <el-breadcrumb-item>视频资源管理</el-breadcrumb-item>
            <el-breadcrumb-item>影视览图</el-breadcrumb-item>
          </el-breadcrumb>
        <br>
        <el-row><el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-input v-model="formInline.user" placeholder="影片名"></el-input>
          </el-form-item>
          <el-form-item label="影视分区：">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="1.番剧" value="ys1"></el-option>
              <el-option label="2.电影" value="ys2"></el-option>
              <el-option label="3.特摄" value="ys3"></el-option>
              <el-option label="4.电视" value="ys4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        </el-row>
      </div>
    </div>
    <br><br><br><br><br><br>
    <div>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm4.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/media/md28234069"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：“迪迦”一词意为印度尼西亚语中神圣的数字"3"。<br/>约在三千万年前，人类处于超古代文明时期...</div>
                  <el-button>迪迦奥特曼</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm1.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ep400620?theme=movie&from_spmid=666.7"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：1990年，一艘巨大的飞船出现在地球上空，人们惶恐不安，却又分外好奇。<br/>经过一段时间紧张的等待，外星飞船始终没有动静...</div>
                  <el-button>第九区</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm2.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/media/md28233767/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.6"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：一个被错误指控谋杀的精神病父亲和他可爱的六岁女儿之间的温情故事。<br/>改编自2013年韩国电影《7号房的礼物》。</div>
                  <el-button>七号房的礼物</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm3.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss33060/"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：激战之后，静止卫星射出的一道光芒提示着一种可能。<br/>悠人一行人一直在战斗的「艾多拉行星」或许并不是GBN的世界，而存在于现实之中。</div>
                  <el-button>GUNDAM BD</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <br>
      <el-col :span="1.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 0 : 1">
        <el-card :body-style="{ padding: '5px' }" style="margin-left: -230px;width: 190px">
          <img src="../../view/26_Employee/assets/fm5.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：《9号秘事》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
                  <el-button>9号密事</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm5.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：《9号秘事2》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
                  <el-button>9号密事2</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm5.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：《9号秘事3》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
                  <el-button>9号密事3</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm5.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：《9号秘事4》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
                  <el-button>9号密事4</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <br>
      <el-col :span="1.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }" style="margin-left: -40px;width: 190px">
          <img src="../../view/26_Employee/assets/fm5.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：《9号秘事5》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
                  <el-button>9号密事5</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm5.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：《9号秘事6》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
                  <el-button>9号密事6</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm5.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：《9号秘事7》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
                  <el-button>9号密事7</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3.6" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img src="../../view/26_Employee/assets/fm5.jpg" class="image">
          <div style="padding: 18px;">
            <div class="bottom clearfix">
              <el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">
                <el-tooltip placement="bottom">
                  <div slot="content">简介：《9号秘事8》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
                  <el-button>9号密事8</el-button>
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>

    </div>
  </div>
</template>

<script>
  export default {
    name: "Employee2",
    data(){
      return{
        formInline: {
          user: '',
          region: ''
        },
        tableData:[
        ],
        methods: {
          onSubmit() {
            console.log('submit!');
          }
        },



        url: '/static/tx.jpg',
        drawer: false,
        innerDrawer: false,
        value1: true,
        value7:35,
        value8:65,



      }
    }

  }</script>

<style scoped>
  .el-button{
    margin-right: 10px;
    width:100%;
  }
  .employee-container{
    margin-left: 15px;
  }
  .image {
    width: 180px;
    display: block;
  }
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>

